import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useEffect, useRef, useState } from 'react';
import Taro from '@tarojs/taro';

function noop() {}

interface ButtonProps {
  title?: string,
  className?: string,
  minNum?: number,
  maxNum?: number,
  line_width?: number,
  text_color?: any,
  onChange?: any
}

export default function Button(props: ButtonProps) {
  const { title, className = '',minNum = 1 , maxNum = 5, line_width = 300, text_color = '#fff', onChange } = props
  const [circleX, setCircleX] = useState(0)
  const [active ,setActive] = useState(false)
  const [over, setOver] = useState(false)
  const endX = useRef(0)
  const [current, setCurrent] = useState(minNum)
  const left = useRef(0)
  const right = useRef(0)
  const perWidth = useRef(0)
  var prevPoint = useRef(0)

  perWidth.current = line_width / (maxNum - minNum)
  
  function start(e) {
    prevPoint.current = e.touches[0].clientX
    setActive(true)
    setOver(false)
  }

  function move(e) {
    let disX = e.touches[0].clientX - prevPoint.current
    prevPoint.current = e.touches[0].clientX
    var _next = minNum

    if (e.touches[0].clientX <= left.current ) {
      _next = minNum
      endX.current = 0
      setCircleX(endX.current)
      setOver(true)
    } else if (e.touches[0].clientX >= right.current) {
      _next = maxNum
      endX.current = line_width
      setCircleX(endX.current)
      setOver(true)
    } else {
      var curCircleX = circleX + disX
      setCircleX(curCircleX)
      _next = Math.round(curCircleX / perWidth.current) + minNum
    }

    if (current !== _next) {
      setCurrent(_next)
      onChange && onChange(_next)
    }
  }
  function end(e) {
    setActive(false)
    endX.current = (current - minNum) * perWidth.current
    setCircleX(endX.current)
  }
  function set(e) {
    let _circlex = e.touches[0].clientX - left.current
    let __index = Math.round(_circlex / perWidth.current) + minNum
    setCurrent(__index)
    onChange && onChange(__index)
    endX.current = (__index - minNum) * perWidth.current
    setCircleX(endX.current)
  }

  useEffect(() => {
    const query = Taro.createSelectorQuery()
    query.select('#line').boundingClientRect(res => {
      //@ts-ignore
      left.current = res.left
      //@ts-ignore
      right.current = res.right
    }).exec()
  },[])
   
  return(
    //滚动条
    <View className={`${s.btn} ${className}`}>
      <View className={s.text} style={{color:`${text_color}`}}>{title}{current}</View>
      <View className={s.scroll}>
        <View className={s.line_btn} onClick={set}>
          <View className={s.line} id='line' style={{width:`${line_width}px`}}></View>
        </View>
        <View 
          className={active ? s.circle_btn : `${s.circle_btn} ${s.active}`}
          onTouchStart={start}
          onTouchMove={over ? noop : move}
          onTouchEnd={end}
          style={{transform: `translateX(${circleX}px)`}}
        ><View className={s.circle}></View></View>
      </View>
    </View>
  )
}